<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
  <title>新华炫闻</title>
  <style>
  body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin: 0; padding: 0;}
  body,button,input,select,textarea {font:12px/1.4 Arial,Helvetica,'Hiragino Sans GB','Microsoft YaHei',sans-serif;color:#333}
  h1,h2,h3,h4,h5,h6 {font-size: 100%;}
  ul,ol {list-style: none;}
  table {border-collapse: collapse; border-spacing:0}
   img {border:0}
  .left{float:left;}
  .right{float:right;}
  .clearfix:after {content: '\20';display: block;height: 0;clear: both; }
  .clearfix {*zoom: 1;}

html{background-color:#f4f4f4;font-size:10px;font-family:Microsoft YaHei}
.header {border-bottom:1px #999 solid;overflow:hidden;position:Relative;margin:0 1.15rem 1.769rem}
.header .logoPIc{float:left;width:13.2rem;display:block;margin-top:1.128rem;margin-bottom:0.448rem}

.category{margin-left:1.153rem;overflow:hidden;}
.category .item{width:11.282rem;float:left;height:7.948rem;margin-right:0.666rem;overflow:hidden;margin-bottom:0.666rem;position:relative}
.category .item .shadow{background-color:#dad9d9;width:100%;height:100%;margin-top:0.256rem;margin-left:0.256rem}
.category .item img{position:absolute;border:0.128rem transparent solid;width:11.026rem;height:7.692rem;display:block;top:0;left:0}

.category .item .title{position:absolute;bottom:0.128rem;left:0.128rem;right:0.128rem;;height:2.153rem;background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.8)); }
.category .item .title h2{font-size:1rem;color:#fff;text-align:right;line-height:2.153rem;padding-right:0.5rem;font-weight:normal;}

.category .item.current .shadow{background-color:#00aaec}
.category .item.current img{border-color:#00aaec}
  </style>
  <script src="<?php echo __STATIC_IMAGE_URL__;?>js/jquery-1.9.1.min.js"></script>
 </head>
 <body>


 <div class="header"><img class="logoPIc" src="<?php echo __STATIC_IMAGE_URL__;?>images/logo.png"></div>


 <div class="category" id="category">
		<div class="item" target-url="<?php echo __STATIC_IMAGE_URL__;?>letv/category?catid=27&name=头条">
			<div class="shadow"></div>
			<img src="<?php echo __STATIC_IMAGE_URL__;?>images/860_600_1.jpg">
			<div class="title"><h2>头条</h2></div>
		</div>
		<div class="item" target-url="<?php echo __STATIC_IMAGE_URL__;?>letv/category?catid=34&name=奥运">
			<div class="shadow"></div>
			<img src="<?php echo __STATIC_IMAGE_URL__;?>images/860_600_4.jpg">
			<div class="title"><h2>奥运</h2></div>
		</div>
		<div class="item" target-url="<?php echo __STATIC_IMAGE_URL__;?>letv/category?catid=64&name=国际">
			<div class="shadow"></div>
			<img src="<?php echo __STATIC_IMAGE_URL__;?>images/860_600_5.jpg">
			<div class="title"><h2>国际</h2></div>
		</div>
		<div class="item" target-url="<?php echo __STATIC_IMAGE_URL__;?>letv/category?catid=48&name=思客">
			<div class="shadow"></div>
			<img src="<?php echo __STATIC_IMAGE_URL__;?>images/860_600_2.jpg">
			<div class="title"><h2>思客</h2></div>
		</div>
		<div class="item" target-url="<?php echo __STATIC_IMAGE_URL__;?>letv/category?catid=29&name=财经">
			<div class="shadow"></div>
			<img src="<?php echo __STATIC_IMAGE_URL__;?>images/860_600_6.jpg">
			<div class="title"><h2>财经</h2></div>
		</div>
		<div class="item" target-url="<?php echo __STATIC_IMAGE_URL__;?>letv/category?catid=32&name=社会">
			<div class="shadow"></div>
			<img src="<?php echo __STATIC_IMAGE_URL__;?>images/860_600_7.jpg">
			<div class="title"><h2>社会</h2></div>
		</div>
		<div class="item" target-url="<?php echo __STATIC_IMAGE_URL__;?>letv/category?catid=30&name=娱乐">
			<div class="shadow"></div>
			<img src="<?php echo __STATIC_IMAGE_URL__;?>images/860_600_3.jpg">
			<div class="title"><h2>娱乐</h2></div>
		</div>
		<div class="item" target-url="<?php echo __STATIC_IMAGE_URL__;?>letv/category?catid=40&name=房产">
			<div class="shadow"></div>
			<img src="<?php echo __STATIC_IMAGE_URL__;?>	images/860_600_8.jpg">
			<div class="title"><h2>房产</h2></div>
		</div>

 </div>


<script>
var index= getCookie("selectedIndex") || 0;

//test by robin（刷新首页焦点位于‘头条’）
setCookie("selectedIndex", 0, 1);

var $elements= $("#category .item");

var length= $elements.length;
var cols= 4;
var rows= length / cols;

//setCookie("selectedIndex", i, 1) 

function setCookie(name, value, expireday) {
	var exp = new Date();
	exp.setTime(exp.getTime() + expireday*24*60*60*1000); 
	document.cookie = name+"="+escape(value)+"; expires"+"="+exp.toGMTString();  
}

function getCookie(name) {
	var cookieStr = document.cookie;
	if(cookieStr.length > 0) {
		var cookieArr = cookieStr.split(";"); 
		for (var i=0; i<cookieArr.length; i++) {
			var cookieVal = cookieArr[i].split("=");
			if(cookieVal[0].trim() == name) {
				return unescape(cookieVal[1]); 
			}
		}
	}
}

 //
function switchPage(i){
           location.href=  $elements.eq(i).attr("target-url") ;
		   setCookie("selectedIndex", i, 1) 
}

function setFocus(i){
	console.log('i:'+i);
         $elements.removeClass("current").eq(i).addClass("current");
}

function keyDownHandler(e){
  switch(e.keyCode){
    case 39:   //right
    if(index< length -1) index++;
	setFocus(index)
	break;

	case 37:   //left
    if(index > 0) index--;
	setFocus(index)
	break;

	case 40:   //down
	index=index-0;
    if( index+cols < length) {
        index+= cols;
        console.log(index);
    }
    setFocus(index)
	break;

	case 38:   //up
    if( index- cols >= 0) {
        index -= cols;
    }
    setFocus(index)
	break;

	case 13://enter
	setCookie('subIndex2',0,1);
    switchPage(index);
	break;
  
  }

}
setFocus(index);
$(document).keydown(keyDownHandler);

//window.onpopstate = function(event) {
 // history.go(-window.history.length);
 //$('.header').html('test');
// window.close();
//};

//history.replaceState({page: 1}, "title 1", '');

//78px/3840
(function (doc, win) {
	var docEl = doc.documentElement,
	resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
	recalc = function () {
			var clientWidth = docEl.clientWidth;
			if (!clientWidth) return;
			docEl.style.fontSize = 78 * (clientWidth / 3840 ) + 'px';
	};

	if (!doc.addEventListener) return;
	win.addEventListener(resizeEvt, recalc, false);
	doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);




</script>
 </body>
</html>
